<template>
  <div class="main-content">
    <div class="main-inner">
      <div class="main-detail" style="min-height: 100%;">
        <div class="search-detail-title">
          <div>
            <span style="font-size: 14px">关键词：</span>
            <el-select v-model="infoKeyword" placeholder="请选择" @change="keywordChange">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div>
            <el-row>
              <el-radio-group v-model="infoTime" @change="timeChange">
                <el-radio-button label="全部"></el-radio-button>
                <el-radio-button label="24小时"></el-radio-button>
                <el-radio-button label="3天"></el-radio-button>
                <el-radio-button label="5天"></el-radio-button>
                <el-radio-button label="7天"></el-radio-button>
                <el-radio-button label="自定义"></el-radio-button>
              </el-radio-group>
              <el-date-picker
                v-model="infoDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                unlink-panels
                value-format="yyyy-MM-dd"
                v-show="isTrue"
                :picker-options="pickerOptions2"
                :default-value="timeDefaultShow"
                @change="dateChange">
              </el-date-picker>
            </el-row>
          </div>
        </div>
        <div class="search-detail-filter" style="font-size: 14px">
          <span>信息属性：</span>
          <el-select
            v-model="infoAttributes"
            multiple placeholder="默认全部"
            style="margin-right: 40px;"
            @visible-change="attributesChange"
            @remove-tag="attributesRemove">
            <el-option
              v-for="item in options0"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>信息来源：</span>
          <el-select
            v-model="infoSource"
            multiple
            collapse-tags
            placeholder="默认全部"
            style="margin-right: 40px;"
            @visible-change="sourceChange"
            @remove-tag="sourceRemove">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>信息排序：</span>
          <el-select v-model="infoSort" placeholder="请选择" @change="sortChange">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-pagination
            background
            layout="total, prev, pager, next"
            :page-size="20"
            :current-page.sync="pageNow"
            @current-change="pageChange"
            :total="totalNum">
          </el-pagination>
        </div>
        <div class="search-detail-content" v-loading="loading">
          <el-table
            :data="tableSearchData"
            stripe
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              :index="1"
              align="center"
              width="60">
            </el-table-column>
            <el-table-column
              prop="name"
              label="舆情信息"
              min-width="300">
              <template slot-scope="scope">
                <p v-html="scope.row.title" style="font-size: 14px; font-weight: bold;"></p>
                <p v-html="scope.row.article"></p>
              </template>
            </el-table-column>
            <el-table-column
              label="来源"
              align="center"
              prop="sourceSpider">
            </el-table-column>
            <el-table-column
              label="时间"
              align="center"
              prop="createTimeFormat">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini">收藏
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="pushToOld(scope.row)">查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import api from '../../api/api'
  import { mapState } from 'vuex'

  export default {
    name: "searchDetail",
    data() {
      return {
        infoKeyword: '',
        infoSort: 'desc',
        infoAttributes: [],
        infoSource: [],
        infoTime: '全部',
        paramTime: ['all'],
        paramSource: ['新闻', '网站', '微博', '微信', '论坛', '博客', '外媒', '政务', '客户端'],
        paramAttributes: ['正面', '中性', '负面'],
        infoDate: [],
        pickerOptions2: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        options0: [{
          value: '正面',
          label: '正面'
        }, {
          value: '中性',
          label: '中性'
        }, {
          value: '负面',
          label: '负面'
        }],
        options1: [{
          value: '新闻',
          label: '新闻'
        }, {
          value: '网站',
          label: '网站'
        }, {
          value: '微博',
          label: '微博'
        }, {
          value: '微信',
          label: '微信'
        }, {
          value: '论坛',
          label: '论坛'
        }, {
          value: '博客',
          label: '博客'
        }, {
          value: '外媒',
          label: '外媒'
        }, {
          value: '政务',
          label: '政务'
        }, {
          value: '客户端',
          label: '客户端'
        }],
        options2: [{
          value: 'desc',
          label: '时间降序'
        }, {
          value: 'asc',
          label: '时间升序'
        }],
        isTrue: false,
        loading: true,
        tableSearchData: [],
        totalNum: null,
        timeDefaultShow: '',
        pageNow: 1
      }
    },
    created() {
    },
    mounted() {
      this.timeDefaultShow = new Date();
      this.timeDefaultShow.setMonth(new Date().getMonth() - 1);
      this.getSearchDetailData(1,this.infoKeyword,'desc')
    },
    computed: {
      ...mapState(['options']),
    },
    methods: {
      keywordChange(val) {
        this.infoSort = 'desc';
        this.getSearchDetailData(1,val,'desc')
      },
      getSearchDetailData(page, key, sorts) {
        const searchParam = {
          currentPage: page,
          pageSize: 20,
          keywordId: key,
          sort: sorts,
          timeData: this.paramTime,
          emotionDatas: this.paramAttributes,
          resourseSources: this.paramSource
        };
        api.GetWarningList(searchParam).then(res => {
          this.loading = false;
          console.log(res);
          this.totalNum = res.data.allCount;
          const data = res.data.listResult;
          this.loading = false;
          this.tableSearchData = [];
          for (let j = 0; j < data.length; j++) {
            this.tableSearchData.push({
              title: data[j].title,
              article: data[j].article,
              sourceSpider: data[j].sourceSpider,
              createTimeFormat: data[j].createTimeFormat,
              url: data[j].url
            })
          }
        }).catch(e => {
          console.log(e);
        })
      },
      timeChange(val) {           // 时间选择
        this.paramTime = [];
        if (this.infoTime == '全部') {
          this.pageNow = 1;
          this.isTrue = false;
          this.paramTime.push('all');
          this.tableSearchData = [];
          this.loading = true;
          this.getSearchDetailData(1, this.infoKeyword, this.infoSort)
        } else if (this.infoTime == '自定义') {
          this.isTrue = true
        } else {
          this.pageNow = 1;
          this.isTrue = false;
          this.paramTime.push(this.infoTime);
          this.tableSearchData = [];
          this.loading = true;
          this.getSearchDetailData(1, this.infoKeyword, this.infoSort)
        }
      },
      dateChange(val) {
        if (val == null) {
          this.$message.error('自定义日期不能为空');
          return false
        }
        this.pageNow = 1;
        this.paramTime = val;
        this.tableSearchData = [];
        this.loading = true;
        this.getSearchDetailData(1, this.infoKeyword, this.infoSort)
      },
      pushToOld(row) {
        window.open(row.url)
      },
      attributesChange(val) {         // 监听属性变化
        if (!val) {
          if (this.infoAttributes.length == 0) {
            this.paramAttributes = [1, 0, -1]
          } else {
            this.paramAttributes = this.infoAttributes;
          }
          this.pageNow = 1;
          this.tableSearchData = [];
          this.loading = true;
          this.getSearchDetailData(1, this.infoKeyword, this.infoSort)
        }
      },
      attributesRemove(val) {
        if (this.infoAttributes.length == 0) {
          this.paramAttributes = ['正面', '中性', '负面']
        } else {
          this.paramAttributes = this.infoAttributes;
        }
        this.pageNow = 1;
        this.tableSearchData = [];
        this.loading = true;
        this.getSearchDetailData(1, this.infoKeyword, this.infoSort)
      },
      sourceChange(val) {            // 监听来源变化
        if (!val) {
          if (this.infoSource.length == 0) {
            this.paramSource = ['新闻', '网站', '微博', '微信', '论坛', '博客', '外媒', '政务', '客户端']
          } else {
            this.paramSource = this.infoSource;
          }
          this.pageNow = 1;
          this.tableSearchData = [];
          this.loading = true;
          this.getSearchDetailData(1, this.infoKeyword, this.infoSort)
        }
      },
      sourceRemove(val) {
        if (this.infoSource.length == 0) {
          this.paramSource = ['新闻', '网站', '微博', '微信', '论坛', '博客', '外媒', '政务', '客户端']
        } else {
          this.paramSource = this.infoSource;
        }
        this.pageNow = 1;
        this.tableSearchData = [];
        this.loading = true;
        this.getSearchDetailData(1, this.infoKeyword, this.infoSort)
      },
      sortChange(val) {            // 监听排序变化
        this.pageNow = 1;
        this.tableSearchData = [];
        this.loading = true;
        this.getSearchDetailData(1, this.infoKeyword, val)
      },
      pageChange(page) {
        this.getSearchDetailData(page, this.infoKeyword, this.infoSort)
      }
    }
  }
</script>

<style scoped lang="less">
  .search-detail-title {
    margin: 10px 20px;
    overflow: hidden;
    .el-input {
      width: 250px;
    }
    .el-row {
      margin-left: 20px;
    }
    .el-date-editor {
      margin-left: 10px;
    }
  }

  .search-detail-title > div {
    float: left;
  }

  .date-show {
    display: none;
  }

  .search-detail-filter {
    margin: 20px 20px;
    .el-pagination{
      margin-top: 20px;
    }
  }

  .search-detail-content {
    margin-top: 20px;
    border-top: 1px solid #ebeef5;
    .el-pagination {
      margin: 20px 20px;
    }
  }
</style>
